<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="1100px"
            :clickModalClose="true"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-tabs v-model="activeName">
                <el-tab-pane label="案件信息" name="first">
                    <el-form
                        ref="formRef"
                        :model="formData"
                        label-width="100px"
                        :rules="formRules"
                        :inline="true"
                    >
                        <el-form-item label="案件名称" prop="caseName">
                            <el-input
                                v-model="formData.caseName"
                                placeholder="请输入案件名称"
                                class="w-[220px]"
                            />
                        </el-form-item>
                        <el-form-item label="案件类型" prop="caseType">
                            <el-select
                                class="flex-1"
                                v-model="formData.caseType"
                                placeholder="请选择案件类型"
                            >
                                <el-option label="专利" value="1" />
                                <el-option label="商标" value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否已有案件" label-width="140px" prop="isExistingcase">
                            <el-radio-group
                                v-model="formData.isExistingcase"
                                placeholder="请选择是否已有案件"
                            >
                                <el-radio label="1">是</el-radio>
                                <el-radio label="2">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="业务类型" prop="businessType">
                            <el-select
                                class="flex-1"
                                v-model="formData.businessType"
                                placeholder="请选择业务类型"
                            >
                                <el-option label="业务1" value="1" />
                                <el-option label="业务2" value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="申请类型" prop="putinType">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.putinType"
                                placeholder="请输入申请类型"
                            />
                        </el-form-item>
                        <el-form-item label="承办部门" label-width="140px" prop="undertakingDepartment">
                            <el-select
                                class="flex-1 w-[180px]"
                                v-model="formData.undertakingDepartment"
                                placeholder="请选择承办部门"
                            >
                                <el-option label="流程部" value="1" />
                                <el-option label="销售部" value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="处理人" prop="conductor">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.conductor"
                                placeholder="请输入处理人"
                            />
                        </el-form-item>
                        <el-form-item label="税率" prop="taxRate">
                            <el-select
                                class="flex-1"
                                v-model="formData.taxRate"
                                placeholder="请选择税率"
                            >
                                <el-option label="30%" value="1" />
                                <el-option label="70%" value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="成本类型" label-width="140px" prop="costType">
                            <el-select
                                class="flex-1 w-[180px]"
                                v-model="formData.costType"
                                placeholder="请选择成本类型"
                            >
                                <el-option label="发明费减" value="" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="成本" prop="cost">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.cost"
                                placeholder="请输入成本"
                            />
                        </el-form-item>
                        <el-form-item label="贡献额" prop="contributionPool">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.contributionPool"
                                placeholder="请输入贡献额"
                            />
                        </el-form-item>
                        <el-form-item label="所属分部" label-width="140px" prop="ownershipDistribution">
                            <el-select
                                class="flex-1 w-[180px]"
                                v-model="formData.ownershipDistribution"
                                placeholder="请选择所属分部"
                            >
                                <el-option label="长沙" value="1" />
                                <el-option label="深圳" value="2" />
                                <el-option label="广州" value="3" />
                                <el-option label="北京" value="4" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选择已有案件" prop="haveCase">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.haveCase"
                                placeholder="请输入选择已有案件"
                            />
                        </el-form-item>
                        <el-form-item label="申请国家" prop="designatedCountry">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.designatedCountry"
                                placeholder="请输入申请国家（地区）"
                            />
                        </el-form-item>

                        <el-form-item label="官费" label-width="140px" prop="officialFee">
                            <el-input
                                class="w-[180px]"
                                v-model="formData.officialFee"
                                placeholder="请输入官费"
                            />
                        </el-form-item>
                        <el-form-item label="代理费" prop="agencyFee">
                            <el-input
                                v-model="formData.agencyFee"
                                placeholder="请输入代理费"
                                class="w-[220px]"
                            />
                        </el-form-item>
                        <el-form-item label="第三方费" prop="hirdPartyPayment">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.hirdPartyPayment"
                                placeholder="请输入第三方费"
                            />
                        </el-form-item>
                        <el-form-item label="是否需要纸质通知书" label-width="140px" prop="isPapernotice">
                            <el-select
                                class="flex-1 w-[180px]"
                                v-model="formData.isPapernotice"
                                placeholder="请选择是否需要纸质通知书"
                            >
                                <el-option label="是" value="1" />
                                <el-option label="否" value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="签单金额" prop="signedAmount">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.signedAmount"
                                placeholder="请输入签单金额"
                            />
                        </el-form-item>
                        <el-form-item label="开票金额" prop="invoiceValue">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.invoiceValue"
                                placeholder="请输入开票金额"
                            />
                        </el-form-item>
                        <el-form-item label="是否立案" label-width="140px" prop="isRegister">
                            <el-select
                                class="flex-1 w-[180px]"
                                v-model="formData.isRegister"
                                placeholder="请选择是否立案"
                            >
                                <el-option label="是" value="1" />
                                <el-option label="否" value="2" />
                            </el-select>
                        </el-form-item>
                      <el-form-item label="处理事项" prop="remark">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.handlingInformation"
                            placeholder="处理事项"
                        />
                      </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.remark"
                                placeholder="请输入备注"
                            />
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="费用信息" name="followUp">
                    <div style="display: flex; justify-content: start">
                        <div style="font-weight: bold; color: #000; padding: 0px 20px">
                            代理费列表
                        </div>
                        <el-button
                            v-perms="['basic:add']"
                            type="primary"
                            size="small"
                            @click="dialogFormVisible = true"
                        >
                            <template #icon>
                                <icon name="el-icon-Plus" />
                            </template>
                            新增
                        </el-button>
                    </div>
                    <el-table class="mt-4" size="large" stripe>
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="费用类型" min-width="100" />
                        <el-table-column label="币别" min-width="100" />
                        <el-table-column label="金额" min-width="100" />
                        <el-table-column label="账单号" min-width="100" />
                        <el-table-column label="账单日" min-width="100" />
                        <el-table-column label="应付日期" min-width="100" />
                        <el-table-column label="实付日期" min-width="100" />
                        <el-table-column label="收款方" min-width="100" />
                    </el-table>
                    <div style="display: flex; justify-content: start; padding: 20px 0px">
                        <div style="font-weight: bold; color: #000; padding: 0px 20px">
                            官费列表
                        </div>
                    </div>
                    <el-table class="mt-4" size="large" stripe>
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="费用名称" min-width="100" />
                        <el-table-column label="费用类型" min-width="100" />
                        <el-table-column label="币别" min-width="100" />
                        <el-table-column label="金额" min-width="100" />
                        <el-table-column label="数量" min-width="100" />
                        <el-table-column label="实际币别" min-width="100" />
                        <el-table-column label="实际金额" min-width="100" />
                        <el-table-column label="应收日期" min-width="100" />
                        <el-table-column label="实收日期" min-width="100" />
                        <el-table-column label="官费期限" min-width="100" />
                        <el-table-column label="实付日期" min-width="100" />
                    </el-table>
                    <div style="display: flex; justify-content: start; padding: 20px 0px">
                        <div style="font-weight: bold; color: #000; padding: 0px 20px">
                            第三方费用支付
                        </div>
                        <el-button
                            v-perms="['basic:add']"
                            type="primary"
                            size="small"
                            @click="dialogFormVisible = true"
                        >
                            <template #icon>
                                <icon name="el-icon-Plus" />
                            </template>
                            新增
                        </el-button>
                    </div>
                    <el-table class="mt-4" size="large" stripe>
                        <el-table-column label="费用类型" min-width="100" />
                        <el-table-column label="币别" min-width="100" />
                        <el-table-column label="金额" min-width="100" />
                        <el-table-column label="账单号" min-width="100" />
                        <el-table-column label="账单日" min-width="100" />
                        <el-table-column label="应付日期" min-width="100" />
                        <el-table-column label="实付日期" min-width="100" />
                        <el-table-column label="收款方" min-width="100" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="附件信息" name="second">
                    <annexData />
                </el-tab-pane>
                <el-tab-pane label="相关案" name="related">
                    <el-form
                        ref="formRef"
                        :model="formData"
                        label-width="100px"
                        :rules="formRules"
                        :inline="true"
                    >
                        <el-form-item label="相关类型" prop="correlationType">
                            <el-select
                                class="flex-1"
                                v-model="formData.correlationType"
                                placeholder="请选择相关类型"
                            >
                                <el-option label="家族案件" value="1" />
                                <el-option label="技术相关" value="2" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-table class="mt-4" size="large" stripe>
                        <el-table-column label="我方文号" min-width="100" />
                        <el-table-column label="名称" min-width="100" />
                        <el-table-column label="相关类型" min-width="100" />
                        <el-table-column label="国家" min-width="100" />
                        <el-table-column label="申请类型" min-width="100" />
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            <el-dialog v-model="dialogFormVisible" title="修改费用" width="1200px">
                <el-form
                    ref="formRef"
                    :model="formData"
                    label-width="100px"
                    :rules="formRules"
                    :inline="true"
                >
                    <el-form-item label="实收金额" prop="fundsReceived">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.fundsReceived"
                            placeholder="请输入实收金额"
                        />
                    </el-form-item>
                    <el-form-item label="是否作废" prop="isInvalid">
                        <el-select
                            class="flex-1"
                            v-model="formData.isInvalid"
                            placeholder="请选择是否作废"
                        >
                            <el-option label="是" value="1" />
                            <el-option label="否" value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="实收日期" prop="paidupDate">
                        <el-date-picker
                            class="flex-1 !flex"
                            v-model="formData.paidupDate"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择实收日期"
                        />
                    </el-form-item>
                    <el-form-item label="请款单号" prop="paymentRequestNumber">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.paymentRequestNumber"
                            placeholder="请输入请款单号"
                        />
                    </el-form-item>

                    <el-form-item label="发票号" prop="invoiceNumber">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.invoiceNumber"
                            placeholder="请输入发票号"
                        />
                    </el-form-item>
                    <el-form-item label="请款日期" prop="requestedDate">
                        <el-date-picker
                            class="flex-1 !flex"
                            v-model="formData.requestedDate"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择请款日期"
                        />
                    </el-form-item>
                    <el-form-item label="费用名称" prop="chargeName">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.chargeName"
                            placeholder="请输入费用名称"
                        />
                    </el-form-item>
                    <el-form-item label="费用描述" prop="chargeDepict">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.chargeDepict"
                            placeholder="请输入费用描述"
                        />
                    </el-form-item>
                    <el-form-item label="应收日期" prop="accountsDate">
                        <el-date-picker
                            class="flex-1 !flex"
                            v-model="formData.accountsDate"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择应收日期"
                        />
                    </el-form-item>
                    <el-form-item label="费用描述英文" prop="chargeDepictfine">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.chargeDepictfine"
                            placeholder="请输入费用描述英文"
                        />
                    </el-form-item>

                    <el-form-item label="应收金额" prop="extendedAmount">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.extendedAmount"
                            placeholder="请输入应收金额"
                        />
                    </el-form-item>
                    <el-form-item label="开票时间" prop="slt">
                        <el-date-picker
                            class="flex-1 !flex"
                            v-model="formData.slt"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择开票时间"
                        />
                    </el-form-item>
                    <el-form-item label="折扣率" prop="discountRate">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.discountRate"
                            placeholder="请输入折扣率"
                        />
                    </el-form-item>

                    <el-form-item label="数量" prop="count">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.count"
                            placeholder="请输入数量"
                        />
                    </el-form-item>
                    <el-form-item label="外方账单日期" prop="externalBillingDate">
                        <el-date-picker
                            class="flex-1 !flex"
                            v-model="formData.externalBillingDate"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择外方账单日期"
                        />
                    </el-form-item>
                    <el-form-item label="汇率" prop="parities">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.parities"
                            placeholder="请输入汇率"
                        />
                    </el-form-item>

                    <el-form-item label="收款公司账户" prop="collectingCompanyAccount">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.collectingCompanyAccount"
                            placeholder="请输入收款公司账户"
                        />
                    </el-form-item>

                    <el-form-item label="账户明细" prop="accountDetails">
                        <el-input
                            class="w-[280px]"
                            v-model="formData.accountDetails"
                            placeholder="请输入账户明细"
                        />
                    </el-form-item>
                    <el-form-item label="收款状态" prop="collectionStatus">
                        <el-select
                            class="flex-1"
                            v-model="formData.collectionStatus"
                            placeholder="请选择收款状态"
                        >
                            <el-option label="是" value="1" />
                            <el-option label="否" value="2" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="外方账单号" prop="externalBillingNumber">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.externalBillingNumber"
                            placeholder="请输入外方账单号"
                        />
                    </el-form-item>

                    <el-form-item label="垫交状态" prop="beddingCondition">
                        <el-select
                            class="flex-1 w-[280px]"
                            v-model="formData.beddingCondition"
                            placeholder="请选择垫交状态"
                        >
                            <el-option label="已垫交" value="1" />
                            <el-option label="未垫交" value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="垫交人" prop="handOver">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.handOver"
                            placeholder="请输入垫交人"
                        />
                    </el-form-item>
                    <el-form-item label="备注" prop="expenseNote">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.expenseNote"
                            placeholder="请输入费用备注"
                        />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </popup>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { caseEdit, caseAdd, caseDetail } from '@/api/case'
import Popup from '@/components/popup/index.vue'
import feedback from '@/utils/feedback'
import type { PropType } from 'vue'
import annexData from './clientFile/annexData.vue'
const fileEditRef = shallowRef<InstanceType<typeof annexData>>()
const dialogFormVisible = ref(false)
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑新建合同案件信息' : '新增新建合同案件信息'
})
// const { pager, getLists, resetPage, resetParams } = usePaging({
//   fetchFun: caseLists,
//   params: queryParams,
// });
const formData = reactive({
    caseName: '',
    caseType: '',
    businessType: '',
    putinType: '',
    undertakingDepartment: '',
    conductor: '',
    taxRate: '',
    costType: '',
    cost: '',
    contributionPool: '',
    ownershipDistribution: '',
    haveCase: '',
    designatedCountry: '',
    brandType: '',
    classQuantity: '',
    quantity: '',
    officialFee: '',
    agencyFee: '',
    hirdPartyPayment: '',
    signedAmount: '',
    invoiceValue: '',
    fundsReceived: '',
    paidupDate: '',
    planNumber: '',
    caseStatus: '',
    caseLink: '',
    remark: '',
    caseNameid: '',
    businessTypeid: '',
    undertakingDepartmentid: '',
    ownershipDistributionid: '',
    costTypeid: '',
    correlationTypeid: '',
    isRegister: '',
    isInvalid: '',
    isExistingcase: '',
    isPapernotice: '',
    chargeType: '',
    currency: '',
    sum: '',
    advancePaymentDate: '',
    paymentRequestNumber: '',
    requestedDate: '',
    accountsDate: '',
    invoiceNumber: '',
    chargeName: '',
    chargeDepict: '',
    chargeDepictfine: '',
    extendedAmount: '',
    discountRate: '',
    count: '',
    parities: '',
    collectingCompanyAccount: '',
    collectionStatus: '',
    accountDetails: '',
    slt: '',
    externalBillingNumber: '',
    externalBillingDate: '',
    beddingCondition: '',
    handOver: '',
    expenseNote: '',
    reductionType: '',
    actualCurrency: '',
    officialDeadline: '',
    ourRef: '',
    relevantCaseName: '',
    correlationType: '',
    userId: '',
    userName: '',
    id: '',
    updateUserId: '',
    updateUserName: '',
    handlingInformation:''
})
const activeName = 'first'
const formRules = {
    caseName: [
        {
            required: true,
            message: '请输入案件名称',
            trigger: ['blur']
        }
    ],
    caseType: [
        {
            required: true,
            message: '请选择案件类型',
            trigger: ['blur']
        }
    ],
    businessType: [
        {
            required: true,
            message: '请选择业务类型',
            trigger: ['blur']
        }
    ],
    putinType: [
        {
            required: true,
            message: '请选择申请类型',
            trigger: ['blur']
        }
    ],
    undertakingDepartment: [
        {
            required: true,
            message: '请选择承办部门',
            trigger: ['blur']
        }
    ],
    ownershipDistribution: [
        {
            required: true,
            message: '请选择所属分布',
            trigger: ['blur']
        }
    ],
    designatedCountry: [
        {
            required: true,
            message: '请输入申请国家（地区）',
            trigger: ['blur']
        }
    ],
    officialFee: [
        {
            required: true,
            message: '请输入官费',
            trigger: ['blur']
        }
    ],
    agencyFee: [
        {
            required: true,
            message: '请输入代理费',
            trigger: ['blur']
        }
    ],
    chargeName: [
        {
            required: true,
            message: '请输入费用名称',
            trigger: ['blur']
        }
    ],
    id: [
        {
            required: true,
            message: '请输入主键ID',
            trigger: ['blur']
        }
    ]
}

const handleSubmit = async () => {
    await formRef.value?.validate()
    const data: any = { ...formData }
    console.log('数据信息',data)
    mode.value == 'edit' ? await caseEdit(data) : await caseAdd(data)
    popupRef.value?.close()
    feedback.msgSuccess('操作成功')
    emit('success')
}

const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
}

const setFormData = async (data: Record<string, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
}

const getDetail = async (row: Record<string, any>) => {
    const data = await caseDetail({
        id: row.id
    })
    setFormData(data)
}

const handleClose = () => {
    emit('close')
}

defineExpose({
    open,
    setFormData,
    getDetail
})
</script>
